<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>AI自动生成图片tag</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="robots" content="max-image-preview:large">
        <meta name="keyword" content="AItag,AI打tag,AI自动生成图片tag,AI打图片tag,DeepDanbooru,deepdanbooru,webui,tianhu,tianhuzong,thz,天狐宗">
        <meta name="description" content="DeepDanbooru的在线图片评估的demo,可以将png、jpg图片上传，利用算法进行评估，然后将生成的tag返回">
        <meta name="author" content="仙">
        <meta name="email" content="tianhuzong@qq.com">
        <base target="_blank">
        <!--base target="_blank"-->
        <script type="text/javascript">
            var originalTitle = document.title;  // 保存原始标题

            document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'hidden') {
                // 页面离开时改变标题
                document.title = '别走嘛，回来嘛';
            } else {
                // 页面回来时还原标题
                document.title = originalTitle;
            }
            });
        </script>
        <!-- 新 Bootstrap5 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
        <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
        <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
        <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
        <!--jQuery-->
        <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
        <style>
            #dropArea {
                width: 100%;
                height: 300px;
                border: 2px dashed #ccc;
                border-radius: 5px;
                text-align: center;
                padding-top: 80px;
                font-size: 1.5em;
                cursor: pointer;
                display: inline-block; /* 添加此行 */
                margin: auto;
                /*margin-left: 350px;*/
            }
            a:link {color:#535151;}      /* 未访问链接*/
            a:visited {color:#535151;}  /* 已访问链接 */
            a:hover {color:#535151;}  /* 鼠标移动到链接上 */
            a:active {color:#535151;}  /* 鼠标点击时 */
            .center {
                margin: auto;
                width: 50%;
                border: 3px  ;
                padding: 10px;
            }
            /*
            .button {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 4px;
                background-color: #f4511e;
                border: none;
                color: #FFFFFF;
                text-align: center;
                font-size: 28px;
                padding: 20px;
                width: 200px;
                transition: all 0.5s;
                cursor: pointer;
                margin: 5px;
            }

                .button span {
                cursor: pointer;
                display: inline-block;
                position: relative;
                transition: 0.5s;
            }

                .button span:after {
                content: '↑';
                position: absolute;
                opacity: 0;
                top: 0;
                right: -20px;
                transition: 0.5s;
            }

                .button:hover span {
                padding-right: 25px;
            }

                .button:hover span:after {
                opacity: 1;
                right: 0;
            }
            */
        </style>
    </head>
    <body style="background-color: #FFF8DC;">
        <div id="app" style="justify-content: center;align-items: center;height: 100%; " class="center">
            <p align="center">
                <h1 style="text-align: center;">DeepDanbooru图片tag生成</h1>
            </p>
            <p style="text-align: center;">
                <span>使用deepdanbooru为一个图片生成tag</span>
                <br />
                <span>如果你上传的图片不是stable diffusion生成的图片就可以用这个网站生成</span>
                <br />
                <span>图片在运算后会自动删除</span>
            </p>
            
            <div id="dropArea" align="center" class="center">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="67px" height="67px">
                    <path fill="currentColor" d="M544 864V672h128L512 480 352 672h128v192H320v-1.6c-5.376.32-10.496 1.6-16 1.6A240 240 0 0 1 64 624c0-123.136 93.12-223.488 212.608-237.248A239.808 239.808 0 0 1 512 192a239.872 239.872 0 0 1 235.456 194.752c119.488 13.76 212.48 114.112 212.48 237.248a240 240 0 0 1-240 240c-5.376 0-10.56-1.28-16-1.6v1.6H544z"></path>
                </svg>
                <br />
                将文件拖到此处或点击上传
            </div>
            <br />
            <div style="width: 100%; display: none;" id="ylt">
                <img src="#" alt="预览图" style=" width: 100%; height: auto;" id="ylttp">
            </div>
            <div style="width: 100%; display: none;" id="TagsMark">
                <table class="table table-hover">
                    <thead id="TagsMarkTitle">
                        <tr>
                            <th>标签</th>
                            <th>得分</th>
                        </tr>
                    </thead>
                    <tbody id="TagsMarkBody">
                        
                    </tbody>    
                </table>
            </div>
            <div style="width: 100%; display: none;" id="TagsOutput">
                <textarea rows="2" style="width: 100%" id="Tagsbox" readonly></textarea>
            </div>
            <div align="center" id="buttom">
                <br />
                <p><span>如果你喜欢的话就在<a href="https://github.com/tianhuzong/DD-web-demo.git">Github</a>上点个star吧</span><br />
                <span>有问题或者有好的建议的话请在github发<a href="https://github.com/tianhuzong/DD-web-demo/issues">issue</a></span><br />
                <span><a href="https://github.com/tianhuzong/">Github@tianhuzong</a> | <a href="https://space.bilibili.com/3494354284972407">bilibili</a> | <a href="http://afdian.net/a/thzsen">爱发电</a></span></p>
                <p>Copyright Sen 2023</p>
            </div>
        </div>
        <!--<button id="upload" class="button" style="vertical-align:middle;margin-left:600px;" ><span>上传图片</span></button>-->
        
        <script>
            //import { ElMessage } from 'element-plus'
            // 获取拖拽区域元素
            var dropArea = document.getElementById('dropArea');
            //预览图元素
            var imgElement = document.getElementById('ylttp');
            // 阻止浏览器默认行为
            dropArea.addEventListener('dragenter', function(event) {
            event.preventDefault();
            });

            dropArea.addEventListener('dragover', function(event) {
            event.preventDefault();
            });

            dropArea.addEventListener('drop', function(event) {
                event.preventDefault();

                var file = event.dataTransfer.files[0];
                //alert(getFilekuozhanming(file.name))
                if (!["jpg","png"].includes(getFilekuozhanming(file.name)) ) {
                    alert("请上传.png或.jpg文件");
                    return;
                } else if(file.size > 10485760){
                    alert("图片不能大于10MB");
                    return;
                }
                var reader = new FileReader();
                reader.onload = function(e) {
                    imgElement.src = e.target.result;
                    showElement("ylt");
                }
                reader.readAsDataURL(file);
                //var uploadbutton = document.getElementById("upload");
        
                uploadFile(file);
                hideElement("dropArea");
                hideElement("dropArea");
                hideElement("TagsMark");
                hideElement("TagsOutput");
                alert("正在运算中，请稍后……");
        

            });
            // 点击上传按钮时触发文件选择对话框
            dropArea.addEventListener('click', function() {
                var fileInput = document.createElement('input');
                fileInput.type = 'file';
                fileInput.accept = '.jpg, .png'; // 指定可接受的文件类型
                fileInput.style.display = 'none';

                fileInput.addEventListener('change', function() {
                    var file = fileInput.files[0];
                    //alert(getFilekuozhanming(file.name))
                    if (!["jpg","png"].includes(getFilekuozhanming(file.name)) ) {
                        alert("请上传.png或.jpg文件");
                        return;
                    } else if(file.size > 10485760){
                        alert("图片不能大于10MB");
                        return;
                    }
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        imgElement.src = e.target.result;
                        showElement("ylt");
                    }
                    reader.readAsDataURL(file);
                    hideElement("dropArea");
                    hideElement("TagsMark");
                    hideElement("TagsOutput");
                    uploadFile(fileInput.files[0]);
                    alert("正在运算中，请稍后……");
                    
                    
                })
                document.body.appendChild(fileInput);
                fileInput.click();
                document.body.removeChild(fileInput);
            });

            // 文件上传函数
            function uploadFile(file) {
                var formData = new FormData();
                formData.append('file', file);
                $.ajax(
                    {url:"/upload",
                    type:"POST",
                    data:formData,
                    processData: false,
                    contentType: false,
                    success:function(response){
                        console.log(response);
                        var table = document.getElementById("TagsMarkBody");
                        var mark = JSON.parse(response);
                        $("#TagsMarkBody").empty()
                        for (let i = 0; i < Object.keys(mark).length; i++) {
                            var tag = Object.keys(mark)[i];
                            var tagmark = mark[tag];
                            var row = document.createElement("tr"); // 创建表格行

                            var cell1 = document.createElement("td"); // 创建第一个单元格
                            cell1.innerHTML = tag; // 填充单元格内容
                            row.appendChild(cell1); // 将单元格添加到行中

                            var cell2 = document.createElement("td"); // 创建第二个单元格
                            cell2.innerHTML = tagmark; // 填充单元格内容
                            row.appendChild(cell2); // 将单元格添加到行中
                            table.appendChild(row); // 将行添加到 tbody 中
                        }
                        var tags = "";
                        for (let i = 0; i < Object.keys(mark).length ;i++ ){
                            if (!["rating:safe","rating:questionable","rating:explicit"].includes( Object.keys(mark)[i])) {
                                tags += Object.keys(mark)[i]+",";
                            }
                        }
                        $("#Tagsbox").text(tags);
                        showElement("dropArea");
                        showElement("TagsMark");
                        showElement("TagsOutput");
                    },
                    error:function(xhr,status,error){
                        alert("文件上传失败,\n错误码："+status+"\n错误原因："+error);
                    }
                });
                // 发送文件上传请求，这里省略实际的上传操作
                // 你可以使用 XMLHttpRequest 或者 fetch API 来发送请求

                // 示例：使用 fetch API
                /*
                fetch('/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    restext = response.text();
                    
                })
                //.then(restext => {console.log(restext)})
                .catch(function(error) {
                    console.error('文件上传失败:', error);
                    // 处理上传失败后的逻辑
                });
                */
            }
            function getFilekuozhanming(filename) {
                return filename.split('.').pop();
            }
            function showElement(id) {
                $("#"+id).show()
            }
            function hideElement(id) {
                $("#"+id).hide()
            }
            function showylt() {
                var element = document.getElementById('ylt');
                element.style.display = 'block';
            }
        </script>
    </body>
</html>